<template>
	<view>
		<u-navbar title="上传形象" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="#1F1F1F">
			
		</u-navbar>
		
		<view class="scene_add">
			<!--  -->
			<view class="title">
				<view class="name">
					形象名称
				</view>
			</view>
			<u--input
				placeholder="请输入形象的名称"
				border="none"
				v-model="title"
				customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
				placeholderStyle="color:#979797;"
				fontSize="26rpx"
				color="#fff"
			></u--input>
			
			<view class="title">
				<view class="name">
					上传素材
				</view>
			</view>
			
			<view class="upload_video">
				<!-- 
				<video v-if="videoUrl" :src="videoUrl" :controls="false" style="display: block;width: 210rpx;height: 210rpx;"></video>
				 -->
				
				<image v-if="videoUrl" @click="uploadVideo" :src="videoUrl+'?x-oss-process=video/snapshot,t_7,f_jpg,w_0,h_0,m_fast,ar_auto'" mode="aspectFit" style="display: block;width: 210rpx;height: 210rpx;background: rgba(206, 206, 206, 0.1802);border-radius: 10rpx;"></image>
				
				<image v-else @click="uploadVideo" src="../static/img/ico_add1.png" mode="widthFix" style="display: block;width: 210rpx;height: 210rpx;border-radius: 10rpx;"></image>
				<view v-if="videoUrl" class="reupload_btn" @click="uploadVideo">
					重新上传
				</view>
				<!-- <u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					:maxCount="1"
					accept="video"
					width="210rpx"
					height="210rpx"
				>
					<image src="../static/img/ico_add1.png" mode="widthFix" style="display: block;width: 210rpx;height: 210rpx;"></image>
				
				</u-upload> -->
				
				<view class="require">
					<view class="name">
						素材要求
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v1.png" mode="widthFix"></image>
						<view class="text">
							视频格式要求为
							<text>MP4/MOV</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							视频大小不大于
							<text>500MB</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							不要使用有
							<text>多人的视频</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							<text>不要遮挡</text>面部，确保人脸不出屏幕，并使面部宽度占整体画面
							<text>宽度的1/4以上</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							分辨率不低于<text>720P</text>，且不高于<text>4K</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							视频长度<text>不少于10秒，且不超过60秒</text>
						</view>
					</view>
					<view class="item">
						<image class="ico" src="../static/img/ico_v2.png" mode="widthFix"></image>
						<view class="text">
							<text>关闭HDR模式</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="footer_none"></view>
		
		<view v-if="videoUrl&&title" class="footer_yellow_btn" @click="showPromise = true">
			立即提交
		</view>
		<view v-else class="footer_yellow_btn disabled">
			立即提交
		</view>
		
		<u-popup :show="showPromise" :closeable="true" :safeAreaInsetBottom="false" mode="center" bgColor="#484848" round="10rpx" @close="closePromise" @open="openPromise">
			<view class="promise">
				<view class="title">
					使用者承诺说明
				</view>
				<view class="text">
					本声明将帮助您更好的在【极氪】平台(下称“本平台")使用相关工具上传和管理您的作品。您若上传作品，即视为您以充分知悉并充分接受以下内容:
					您作为使用者在本平台上传、发布的作品，应具有独立、完整的知识产权，不得侵犯他人知识产权等任何权利。您在使用本平台及上传、发布作品时，应当自觉遵守国家法律、法规，遵守公共秩序，尊重社会公德、社会主义制度、国家利益、公民合法权益、道德风尚和信息真实性等要求。如有违反，一经本平台发现将根据违规程度采取包括但不限于删除、下架、禁止发布内容、封禁账号等处理方式。如造成恶劣影响或涉嫌违法犯罪的，本平台将有权向有关管理机关或公安机关提交相关内容，并配合进行调查。
					·若您上传的作品及作品中的素材(包括但不限于创意、文本、肖像、音频、图片、视频等)侵犯了任何第三方权利，本平台均有权在收到相关侵权投诉后对该被投诉的作品或用户账号依据相应规则，采取包括但不限于下架、警告、封禁账号等处理方式。
				</view>
				<view class="btn" @click="clickAgree">
					我已知晓，同意
				</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				fileList1: [],
				showPromise: false,
				userId:'',
				aliyunOssSign: {},
				videoUrl: '',
				imageFile: ''
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.getAliyunOssSing()
		},
		methods: {
			// 获取阿里云上传请求参数
			getAliyunOssSing(){
				uni.$u.http.get('/api/aliyun_oss_sign/'+this.userId +'?from=miniprogram').then(res => {
					console.log('阿里云请求参数-----',res.data.data)
					this.aliyunOssSign = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 上传视频
			uploadVideo(){
				const that = this
				uni.chooseVideo({
					sourceType: ['album'],
					compressed: false,
					success: function (res) {
						console.log('选定视频---',res)
						
						const tempFilePath = res.tempFilePath;
						const timestamp = new Date().getTime();
						const randomNum = Math.floor(Math.random() * 10000);
						const fileName = timestamp + "_" + randomNum + tempFilePath.substring(tempFilePath.lastIndexOf('.'));
						console.log('视频名称---',fileName)
						if(res.size > (500*1024*1024)){
							that.$refs.uToast.show({
								message: "视频大小不能大于500MB"
							})
							return
						}
						if(res.duration < 10){
							that.$refs.uToast.show({
								message: "视频长度不能小于10秒"
							})
							return
						}
						if(res.duration > 60){
							that.$refs.uToast.show({
								message: "视频长度不能超过60秒"
							})
							return
						}
						if(res.width < 720 || res.height < 720){
							that.$refs.uToast.show({
								message: "视频分辨率不能低于720P"
							})
							return
						}
						if(res.width > 2160 || res.height > 4096){
							that.$refs.uToast.show({
								message: "视频分辨率不能高于4K"
							})
							return
						}
						
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						uni.uploadFile({
							url: that.aliyunOssSign.host,
							filePath: tempFilePath,
							name: 'file',
							formData: {
								key: that.aliyunOssSign.dir+fileName,
								policy: that.aliyunOssSign.policy,
								OSSAccessKeyId: that.aliyunOssSign.accessid,
								signature: that.aliyunOssSign.signature
							},
							success: (resa) => {
								console.log('上传------',resa)
								if(resa.statusCode == 204)
								{
									that.videoUrl = that.aliyunOssSign.host +'/'+ that.aliyunOssSign.dir + fileName
									uni.hideLoading();
								}
								else{
									uni.hideLoading();
									that.$refs.uToast.show({
										message: "上传失败,请重新上传"
									})
								}
							}
						});
						
						
					}
				});
			},
			// 添加形象
			postSourceAdd(){
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				uni.$u.http.post('/api/speed_source_add/'+this.userId +'?from=miniprogram', {
					type:0,
					title: this.title,
					url: this.videoUrl
				}).then(res => {
					console.log('添加形象-----',res.data.data)
					uni.hideLoading();
					// uni.redirectTo({
					// 	url: '/imagePages/myImage/myImage'
					// })
					uni.navigateBack({
						delta: 1
					});
				}).catch(err => {
					console.log(err)
					uni.hideLoading();
					that.$refs.uToast.show({
						message: "提交失败,请重新提交"
					})
				})
			},
			clickAgree(){
				this.showPromise = false
				// uni.showLoading({
				// 	title: '提交中',
				// 	mask: true
				// });
				// setTimeout(function () {
				// 	uni.hideLoading();
				// }, 2000);
				this.postSourceAdd()
				// this.$refs.uToast.show({
				// 	type: 'loading',
				// 	loading: true,
				// 	message: "提交中",
				// 	complete() {
				// 		uni.redirectTo({
				// 			url: '/imagePages/myImage/myImage'
				// 		})
				// 	}
				// })
				
			},
			openPromise() {
				// console.log('open');
			},
			closePromise() {
				this.showPromise = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				const that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.aliyunOssSign.host,
						filePath: url,
						name: 'file',
						formData: {
							key: that.aliyunOssSign.dir,
							policy: that.aliyunOssSign.policy,
							OSSAccessKeyId: that.aliyunOssSign.accessid,
							signature: that.aliyunOssSign.signature
						},
						success: (res) => {
							console.log('上传组件',res)
							if(res.statusCode == 204)
							{
								setTimeout(() => {
									resolve(res.data.data)
								}, 1000)
							}
							else{
								uni.hideLoading();
								uni.showToast({
									title: '上传失败,请重新上传',
									duration: 2000,
									icon: 'none'
								});
							}
							
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.promise{
	width: 560rpx;
	box-sizing: border-box;
	padding:0 30rpx 35rpx;
	.btn{
		height: 70rpx;
		border-radius: 35rpx;
		background: #F9BE01;
		line-height: 70rpx;
		text-align: center;
		color: #3D3D3D;
		font-size: 26rpx;
		font-weight: 600;
		margin-top: 25rpx;
	}
	.title{
		text-align: center;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #FFFFFF;
		padding:25rpx 0 25rpx;
	}
	.text{
		font-size: 20rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #FFFFFF;
		text-align: justify;
	}
}
/deep/.u-upload__wrap__preview{
	margin: 0;
}
.upload_video{
	border-radius: 10rpx;
	background: #2C2C2C;
	box-shadow: 2px 2px 30px 0px rgba(0, 0, 0, 0.05);
	padding:30rpx;
	.require{
		.name{
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #FFFFFF;
			padding-bottom: 6rpx;
			padding-top: 35rpx;
		}
		.item{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding:14rpx 0;
			.ico{
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
				margin-top: 4rpx;
			}
			.text{
				width: 100%;
				color: #E3E3E3;
				font-size: 26rpx;
				line-height: 40rpx;
				text{
					color: #F9BE01;
					font-weight: 600;
				}
			}
		}
	}
}
.scene_add{
	padding:0 40rpx;
	.scene_select{
		display: inline-flex;
		align-items: center;
		height: 70rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		border: 1rpx solid #F9BE01;
		padding:0 15rpx 0 20rpx;
		.name{
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #F9BE01;
			padding-right: 10rpx;
		}
	}
	.title{
		display: flex;
		align-items: center;
		padding:40rpx 0 20rpx;
		.text{
			color: #979797;
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			color: #FFFFFF;
		}
		text{
			display: block;
			color: #FF1313;
			font-size: 26rpx;
			line-height: 40rpx;
		}
	}
}
.footer_none{
	width: 100%;
	height: 260rpx;
}
.footer_yellow_btn{
	position: fixed;
	left:40rpx;
	right: 0;
	bottom: 60rpx;
	width: 670rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: #F9BE01;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	color: #292D32;
	font-weight: 600;
	&.gray{
		background: #494949;
		color: #fff;
		bottom: 160rpx;
	}
	&.disabled{
		opacity: 0.3;
	}
}
.reupload_btn{
	width: 210rpx;
	height: 56rpx;
	border-radius: 35rpx;
	background: #F9BE01;
	line-height: 56rpx;
	text-align: center;
	font-size: 22rpx;
	color: #292D32;
	font-weight: 600;
	margin-top: 30rpx;
}
</style>
